import type { MetaFunction } from "@remix-run/cloudflare";

import { Link } from "@remix-run/react";
import { ArrowRight, Sparkles, PenTool, Clock, Shield } from "lucide-react";
import { useEffect, useState } from "react";
import Header from "~/components/Header";

const description =
    "专业级室内设计，由人工智能驱动。在几分钟内获得个性化的设计方案，打造独具特色的生活空间";
export const meta: MetaFunction = () => {
    return [
        { title: "宅绘云坊" },
        { name: "description", content: description },
    ];
};

const LandingPage = () => {
    const [login, setLogin] = useState(false);
    useEffect(() => {
        const user = localStorage.getItem("userLogged");

        if (user) {
            setLogin(true);
        }
    }, []);

    return (
        <div className="min-h-screen bg-white">
            <Header />
            {/* Hero Section */}
            <header className="relative bg-gradient-to-r from-emerald-50 to-green-50 py-16">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
                        <div className="mb-8 lg:mb-0">
                            <h1 className="text-4xl font-bold text-gray-900 mb-6">
                                用AI重新定义您的理想居所
                            </h1>
                            <p className="text-xl text-gray-600 mb-8">
                                {description}
                            </p>
                            <div className="flex gap-4">
                                <Link
                                    to={login ? "/features/t2i" : "/login"}
                                    className="bg-emerald-600 text-white px-6 py-3 rounded-lg hover:bg-emerald-700 transition flex items-center gap-2"
                                >
                                    开始设计 <ArrowRight className="w-5 h-5" />
                                </Link>
                                <button className="border border-emerald-600 text-emerald-600 px-6 py-3 rounded-lg hover:bg-emerald-50 transition">
                                    了解更多
                                </button>
                            </div>
                        </div>
                        <div className="relative">
                            <div className="bg-white p-4 rounded-2xl shadow-xl">
                                <img
                                    src="/images/slogan.jpg"
                                    alt="AI室内设计展示"
                                    className="rounded-lg w-full"
                                />
                            </div>
                            <div className="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg flex items-center gap-3">
                                <Sparkles className="text-emerald-600 w-5 h-5" />
                                <span className="text-sm font-medium">
                                    AI实时生成中
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            {/* Features Section */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h2 className="text-3xl font-bold text-center mb-16">
                        为什么选择我们
                    </h2>
                    <div className="grid md:grid-cols-3 gap-8">
                        <FeatureCard
                            icon={<PenTool className="w-6 h-6" />}
                            title="AI智能设计"
                            description="运用先进的AI技术，根据您的喜好和需求，快速生成专业级别的室内设计方案"
                        />
                        <FeatureCard
                            icon={<Clock className="w-6 h-6" />}
                            title="效率至上"
                            description="传统设计流程缩短80%，15分钟内即可获得完整的空间设计方案"
                        />
                        <FeatureCard
                            icon={<Shield className="w-6 h-6" />}
                            title="品质保证"
                            description="每个方案都经过AI和专业设计师的双重把关，确保设计品质"
                        />
                    </div>
                </div>
            </section>

            {/* How It Works Section */}
            <section className="bg-emerald-50 py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h2 className="text-3xl font-bold text-center mb-16">
                        使用流程
                    </h2>
                    <div className="grid md:grid-cols-4 gap-8">
                        <ProcessStep
                            number="1"
                            title="上传空间"
                            description="上传您的房间照片和参考图"
                        />
                        <ProcessStep
                            number="2"
                            title="选择风格"
                            description="从多种设计风格中选择您喜欢的"
                        />
                        <ProcessStep
                            number="3"
                            title="AI生成"
                            description="AI快速生成多个设计方案"
                        />
                        <ProcessStep
                            number="4"
                            title="细节调整"
                            description="根据喜好进行个性化调整"
                        />
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <h2 className="text-3xl font-bold mb-6">
                        开启您的AI设计之旅
                    </h2>
                    <p className="text-xl text-gray-600 mb-8">
                        立即体验AI智能室内设计，打造理想的居住空间
                    </p>
                    <Link
                        to={login ? "/features/t2i" : "/login"}
                        className="bg-emerald-600 text-white px-8 py-4 rounded-lg hover:bg-emerald-700 transition flex items-center gap-2 mx-auto"
                    >
                        免费开始设计 <ArrowRight className="w-5 h-5" />
                    </Link>
                </div>
            </section>
        </div>
    );
};

interface FeatureCardProps {
    icon: React.ReactNode;
    title: string;
    description: string;
}

const FeatureCard = ({ icon, title, description }: FeatureCardProps) => {
    return (
        <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
            <div className="text-emerald-600 mb-4">{icon}</div>
            <h3 className="text-xl font-semibold mb-3">{title}</h3>
            <p className="text-gray-600">{description}</p>
        </div>
    );
};

interface ProcessStepProps {
    number: string;
    title: string;
    description: string;
}

const ProcessStep = ({ number, title, description }: ProcessStepProps) => {
    return (
        <div className="text-center">
            <div className="w-12 h-12 bg-emerald-600 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                {number}
            </div>
            <h3 className="text-xl font-semibold mb-3">{title}</h3>
            <p className="text-gray-600">{description}</p>
        </div>
    );
};

export default LandingPage;
